<template>
    <div class="tem-forecast-wrapper">
        <div class="tem-forecast-top">
            <el-tag type="success" color="black" size="medium" effect="light">温度预测</el-tag>
        </div>
        <div class="tem-forecast-center">
            <div class="tem-forecast-center-left">
                <div style="width: auto;height: 4.8rem" id="maining"></div>
            </div>
            <div class="tem-forecast-center-right">
                <dv-scroll-board :config="config" style="width:auto;height:4.8rem" />
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";

    export default {
        name: "temForecast",
        data(){
            return{
                config:{
                    header: ['时间', '温度异常信息'],
                    data: [
                        ['----', '<span style="color: red">-----</span>'],
                        ['----', '<span style="color: red">-----</span>'],
                        ['----', '<span style="color: red">-----</span>'],
                        ['----', '<span style="color: red">-----</span>'],
                        ['----', '<span style="color: red">-----</span>'],
                        ['----', '<span style="color: red">-----</span>'],
                        ['----', '<span style="color: red">-----</span>'],
                        ['----', '<span style="color: red">-----</span>'],
                        ['----', '<span style="color: red">-----</span>'],
                        ['----', '<span style="color: red">-----</span>']
                    ]
                }
            }
        },
        mounted() {
            this.echartsInit()
        },
        methods:{
            echartsInit() {
                echarts.init(document.getElementById('maining')).setOption({
                    xAxis: {
                        type: 'category',
                        name:'days',
                        axisLabel:{
                            formatter:'{value}'
                        },
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisLine:{
                            lineStyle:{
                                color:'#33cea0'
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name:'°C',
                        axisLabel:{
                            formatter:'{value}°C'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#33cea0'
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    series: [{
                        hoverAnimation: true, //是否开启 hover 在拐点标志上的提示动画效果
                        data: [12, 20, 18, 16, 22, 15, 19],
                        type: 'line',
                        smooth: true,
                        itemStyle : { normal: {
                                label : {show: true,color:'white',backgroundColor:'black'}

                            }},
                    }],
                    color:'#789bc3',
                    textStyle:{
                        color:'#33cea0'
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .tem-forecast-wrapper{
        height: 5.5rem;
        .tem-forecast-top{
            height: 0.5rem;
        }
        .tem-forecast-center{
            height: 5rem;
            display: flex;
            .tem-forecast-center-left{
                flex: 1;
            }
            .tem-forecast-center-right{
                flex: 1;
            }
        }
    }
</style>
